<template>
	<scroll-view scroll-y class="public-scroll-view">
		<view class="text-content-container">
			<view class="text-content">
				<text style="font-size: 28rpx;">{{data}}</text>
			</view>
		</view>
		<view class="text-button-container">
			<view class="text-button">
				<button type="primary" @click="addText()">添加一行文字</button>
				<button type="warn" :disabled="!canRemove" @click="delText()">删除一行文字</button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				data:"",
				datas: [
					'王者荣耀',
					'金铲铲',
					'穿越火线',
					'英雄联盟',
					'洛克王国',
					'炉石传说'
				],
				extraLine: [],
				canRemove:false
			}
		},
		methods: {
			addText(){
				this.extraLine.push(this.datas[this.extraLine.length % 6]);
				this.data = this.extraLine.join('\n');
				this.canRemove = this.extraLine.length > 0;
			},
			delText(){
				if (this.extraLine.length > 0) {
					this.extraLine.pop();
					this.data = this.extraLine.join('\n');
					this.canRemove = this.extraLine.length > 0;
				}
			}
		}
	}
</script>

<style>
.text-content-container{
	display: flex;
	justify-content: center;
	padding-top: 20rpx;
}
.text-content{
	min-height: 300rpx;
	background-color: white;
	width: 95%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	border-radius: 20rpx;
}
.text-button-container{
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.text-button{
	width: 95%;
}
.text-button>button{
	margin-top: 20rpx;
}
</style>
